<template>
	<div class="answer-nlp-wrapper">
		<el-dialog :visible.sync="dialogVisible" :show-close="false" :before-close="handleClose" width="470px" class="answer-nlp-dialog" append-to-body>
			<div slot="title" class="dialog-title">
				<span class="answer-title-text">{{ getAnswerNluTitle }}</span>
				<!-- <span class="sure-text" v-show="showCosentSure">同意确认设置</span> -->
				<p class="span-header" @click="down" v-if="!showDetail" :style="nluError ? 'pointer-events: none;' : ''">
					<span><img src="@/assets/img/icon/download.png" alt="" /></span>
					<span class="i-txt">语库下载</span>
					<!-- <span class="close" @click="handleClose">X</span> -->
				</p>
			</div>
			<div class="defualt-nlu-key">
				<span class="label">意图标记</span>
				<el-input v-model="nluData.nluMark" class="key-input" :disabled="showDetail" :class="!nluData.isAnswerNluLib ? 'pointer-event' : ''" @input="input"></el-input>
			</div>
			<div class="reset-default" :class="!nluData.isAnswerNluLib || showDetail || answerNluMode === nluData.nluMark ? 'disable' : ''" @click="setDefault"> 恢复默认设置 </div>
			<div class="system">
				<p><el-checkbox :value="nluData.isAnswerNluLib" :disabled="showDetail || nluError" @change="e => onButtonClick(e, 'isAnswerNluLib')"></el-checkbox></p>
				<p class="nlu" :style="nluError ? 'pointer-events: none;' : ''">NLU语库</p>
			</div>
			<div class="user-input">
				<el-checkbox :value="nluData.isOtherNluLib" :disabled="showDetail" @change="e => onButtonClick(e, 'isOtherNluLib')">
					<i v-show="nluData.keys.length === 0 && !nluData.isOtherNluLib">其他</i>
				</el-checkbox>
				<div class="conetns">
					<div v-for="(item, index) in nluData.keys" :key="item" class="current-value">
						<span>
							<el-input @input="e => (item.value = validForbidFeatureSymbols(e))" v-focus autofocus v-model="item.value" v-if="item.status" @blur="onblur" maxlength="40"></el-input>
						</span>

						<span>
							<span :class="item.isRepeat ? 'error' : ''" class="add-input" v-if="!item.status && item.value">
								<i class="add-i">{{ item.value }}</i> <i class="el-icon-close" :class="showDetail ? 'disable' : ''" @click="delAnswerNluKeys(index)"></i>
							</span>
						</span>
					</div>
					<div class="add-btn">
						<el-button v-show="nluData.isOtherNluLib && added" @click="addAnswer" v-if="!showDetail"><i class="el-icon-plus"> 新增</i></el-button>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" @click="submitNluKey">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		dialogVisible: {
			type: Boolean,
			required: true,
			default: () => false
		},
		answerNluMode: {
			type: String,
			required: true,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		answerNluData: {
			type: Object,
			required: true,
			default: () => {}
		},
		prop: {
			type: String,
			default: () => ''
		},
		nluError: {
			type: Boolean,
			default: () => false
		}
	},
	computed: {
		getAnswerNluTitle() {
			let title = '';
			switch (this.answerNluMode) {
				case 'positive':
					title = '肯定回答设置';
					break;
				case 'negative':
					title = '否定回答设置';
					break;
				case 'repeat':
					title = '没听清请重复回答设置';
					break;
				case 'fuzzy':
					title = '嗯啊模糊回答设置';
					break;
				default:
					title = '';
					break;
			}
			return title;
		}
	},

	mounted() {
		this.$nextTick(() => {
			this.nluData = { ...this.answerNluData };
			this.nluData.keys = this.nluData.keys.map(item => {
				return { value: item, status: false, isRepeat: false };
			});
		});
	},

	data() {
		return {
			added: true,
			nluData: {
				keys: [],
				nluMark: '',
				isAnswerNluLib: true,
				isOtherNluLib: false
			}
		};
	},

	methods: {
		//新增按钮事件
		addAnswer() {
			this.added = !this.added;
			// 添加 NLU 关键字
			this.nluData = { ...this.nluData, keys: [...this.nluData.keys, { status: true, value: '', isRepeat: false }] };
		},
		//输入框失去焦点
		onblur() {
			// 否定回答失去焦点
			for (let index = 0; index < this.nluData.keys.length; index++) {
				if (this.nluData.keys[index].value.trim() === '') {
					this.nluData.keys[index].status = false;
					this.nluData.keys.splice(index, 1);
					this.added = true;
					return;
				}
				if (this.nluData.keys[index].status) {
					this.nluData.keys[index].status = !this.nluData.keys[index].status;
					this.added = true;
					return;
				}
			}
		},
		//删除 NLU 关键字
		delAnswerNluKeys(index) {
			this.nluData.keys.splice(index, 1);
		},

		handleClose() {
			this.$emit('close');
		},
		down() {
			this.$emit('down');
		},
		onButtonClick(val, prop) {
			if (prop === 'isAnswerNluLib') {
				this.nluData = { ...this.nluData, isAnswerNluLib: val };
			} else {
				this.nluData = { ...this.nluData, isOtherNluLib: val };
			}
		},
		setDefault() {
			if (this.prop === 'answerYesData') {
				this.nluData.nluMark = 'positive';
			} else if (this.prop === 'answerNoData') {
				this.nluData.nluMark = 'negative';
			} else if (this.prop === 'answerRepeatData') {
				this.nluData.nluMark = 'repeat';
			} else {
				this.nluData.nluMark = 'fuzzy';
			}
		},
		submitNluKey() {
			if (!this.nluData.isAnswerNluLib && !this.nluData.isOtherNluLib) {
				this.$message({
					message: '请至少选择一个选项，请检查后重新提交!',
					type: 'warning'
				});
				return;
			} else if (this.nluData.isOtherNluLib && (this.nluData.keys.length === 0 || this.nluData.keys[0].value.trim() === '')) {
				this.$message({
					message: '请至少编辑一个自定义回答，请检查后重新提交',
					type: 'warning'
				});
				return;
			}
			let newarr = [];
			//去重
			for (let index = 0; index < this.nluData.keys.length; index++) {
				let value = this.nluData.keys[index].value;
				if (newarr.indexOf(value) !== -1) {
					this.nluData.keys[index].isRepeat = true;
					this.$message.error('当前编辑回答中有重复项，请检查后重新提交');
					return;
				}
				newarr.push(value);
				this.nluData.keys[index].isRepeat = false;
			}
			this.nluData.keys = this.nluData.keys.map(item => item.value);
			this.$emit('input', this.prop, this.nluData);
			this.$emit('submit');
		}
	}
};
</script>

<style></style>
